<template>
  <div class="md-experioncer">
    <div class="md-experioncer-container">
      <div class="md-experioncer-bg"></div>
      <div class="md-experioncer-main">
        <md-titles title="Experioncer Information"/>
        <div class="md-panel">
          <div class="avatar">
            <img :src="require('/assets/img/dynamic/avatar.png')" alt="">
          </div>
          <p class="user-name">{{ userInfo.name }}</p>
          <ul class="user-list">
            <li class="user-item">
              <span>E-mail</span>
              <span>{{ userInfo.email }}</span>
            </li>
            <li class="user-item">
              <span>Residence</span>
              <span>{{ userInfo.country }} - {{ userInfo.province }} - {{ userInfo.city }}</span>
            </li>
            <li class="user-item">
              <span>Works</span>
              <span>{{ link }}</span>
            </li>
            <li class="user-item">
              <span>Comfort Zone</span>
              <div>
                <el-tag style="margin-right: 10px" size="small" v-for="item in zones" :key="item.dictValue">{{ item.dictLabel }}</el-tag>
              </div>
            </li>
          </ul>
        </div>
        <!-- <el-descriptions title="Experioncer Information" direction="vertical" :column="4" border>
          <el-descriptions-item label="Name">{{ userInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="Country/State/Province" :span="3">{{ userInfo.country }} - {{ userInfo.province }} - {{ userInfo.city }}</el-descriptions-item>
          <el-descriptions-item label="Works">
            {{ link }}
          </el-descriptions-item>
          <el-descriptions-item label="Comfort Zone">
            <el-tag style="margin-right: 10px" size="small" v-for="item in zones" :key="item.dictValue">{{ item.dictLabel }}</el-tag>
          </el-descriptions-item>
        </el-descriptions> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MdExperiencerDetailComponent',
  layout: 'dynamic',
  data () {
    return {
      userInfo: {
        country: [],
        works: [{
          link: ''
        }]
      },
      link: '',
      scopesInfo: [],
      zones: []
    }
  },
  created () {
    this.getItemsInfo()
  },
  methods: {
    async getItemsInfo () {
      const res = await this.$axios.get('web/sysDict/type/md_scopes')
      if (res.code == 200) {
        this.scopesInfo = res.data
        this.getUserInfo()
      }
    },
    async getUserInfo () {
      const a = this.$route.params.userExperiencerId || ''
      const res = await this.$axios.get(`web/userExperiencer/${a}`)
      if (res.code == 200) {
        this.userInfo = res.data
        this.link = JSON.parse(res.data.works)[0].link
        this.zones = this.scopesInfo.filter(e => {
          return res.data.scopes.split(',').includes(e.dictValue)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.md-experioncer {
  width: 100%;
  background: #fff;
  .md-experioncer-container {
    width: 100%;
    height: 550px;
    background: #fff;
    position: relative;
    .md-experioncer-bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      opacity: 0.05;
      background: url('@/assets/img/dynamic/home-bg.png') repeat right bottom;
    }
    .md-experioncer-main {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 100%;
      width: 700px;
      height: 100%;
      ::v-deep .title {
        padding-left: 0;
        font-size: 18px;
      }
      .md-panel {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .avatar {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          margin-bottom: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .user-name {
          color: $md-primary-color;
          letter-spacing: 2px;
          font-size: 16px;
        }
        .user-list {
          width: 100%;
          .user-item {
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #dcdcdc;
            span {
              font-size: 14px;
              &:first-child {
                color: #555;
              }
              &:last-child {
                color: #1d1d1d;
              }
            }
          }
        }
      }
    }
  }
}
</style>
